<template>
  <!-- 大框 -->
  <div class="eat-main">
    <l-dialog></l-dialog>
    <tabarmount @buttonEvent="toDeskPage"></tabarmount>
    <!-- 大报餐按钮 -->
    <div class="eat-icon">
      <img src="../../../static/images/nodels.jpg" />
    </div>
    <div class="text">请选择您的用餐时间</div>
    <div class="line">--------------</div>
    <!-- 时间选这和常挂 -->
    <div class="eat-picker">
      <div>
        <img class="icon-img" src="../../../static/icon/date.png">
        <picker class="picker" mode="date"  start="2021-05-15" end="2022-05-15" @change="dateChange" :value="timeValue">
          {{dateEatDefault}}
        </picker>
      </div>
      <div>
        <img class="icon-img" src="../../../static/icon/time.png">
        <picker class="picker" mode="selector" :range="timeEatArray" @change="timeChange" :value="dateValue">
          {{timeEatDefault}}
        </picker>
      </div>
      <div class="div-switch">
<!--        <switch :checked="longCheckEat" @change="longEatChange">
          <text>该时段饭牌常驻</text>
        </switch> -->
        <l-radio>
          <l-radio-group>
            常驻
          </l-radio-group>
        </l-radio>
      </div>
    </div>
  </div>
</template>

<script>
  import tabarmount from '../../components/tabarmount'
// 缺登录
export default {
  data () {
    return {
      longCheckEat : true,
      timeEatDefault : "选择就餐时间段",
      timeValue: -1,
      dateValue: "0000-00-00",
      dateEatDefault : "选择就餐日期",
      timeEatArray : [
        "10:00",
        "10:30",
        "11:00",
        "16:00",
        "17:00"
      ]
    }
  },
  components: {
    tabarmount
  },
  methods : {
    timeChange (e) {
      this.timeValue=e.mp.detail.value
      this.timeEatDefault=this.timeEatArray[this.timeValue]
      console.log(this.timeValue)
    },
    dateChange (e) {
        this.dateEatDefault=e.mp.detail.value
    },
    longEatChange (e) {
      this.longCheckEat=e.mp.detail.value
    },
    toDeskPage (e) {
      if(this.timeValue===-1||this.dateEatDefault==="0000-00-00"){
        wx.lin.showDialog({
          type:"alert",
          title:"",
          content:"请完善报餐信息" ,
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }else {
        wx.navigateTo({
          url: "/pages/desk/main"
        })
      }
    }
  }
}
</script>

<style scoped>
  .eat-main{
    width: 100%;
    height: auto;
    position: relative;

  }

  .eat-icon{
    width: 600rpx;
    height: 400rpx;
    margin: 180rpx 75rpx 40rpx;

  }

  .eat-icon > img {
    width: 100%;
    height: 100%;
    background-color: #0f9d58;
    border-radius: 20rpx;
    /* box-shadow: 10rpx 10rpx 10rpx #888888; */

  }
  .eat-picker{
    width: 100%;
    height: auto;
  }

.eat-picker > div{
  width: 360rpx;
  height: 72rpx;
  line-height: 75rpx;
  text-indent: 30rpx;
  margin: 0 195rpx 20rpx;
  border-radius: 10rpx;
  border: 1rpx solid #888888;

  display: flex;
  justify-content: space-between;
}

.picker{
  width: 300rpx;
  height: 72rpx;
  font-size: 30rpx;
}
.icon-img{
  width: 60rpx;
  height: 60rpx;
  margin: auto;

}

.div-switch{
  border-color: #ffffff !important;
}

.div-switch > switch{
  letter-spacing: 1rpx;
  font-weight: lighter;
  /* text-shadow: 5rpx 5rpx 5rpx #888888; */
  font-size: 15px;
}
.div-switch > l-radio{
  letter-spacing: 1rpx;
  font-weight: lighter;
  /* text-shadow: 5rpx 5rpx 5rpx #888888; */
  font-size: 15px;
}

.text{
  width: 100%;
  height: 60rpx;
  text-align: center;
  font-size: 40rpx;
  font-weight: 700;
}

.line{
  width: 100%;
  height: auto;
  text-align: center;
  margin-bottom: 36rpx;
  color: #ff8000;
}
</style>
